/**
 * 选择关联标签
 */
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';

import { Tag } from 'antd';

// 封装组件
const SelectTag = forwardRef((props, ref) => {
    const handleRemove = (e, itemVal) => {
        const { value, onChange } = props;
        e.preventDefault();
        onChange(
            value.filter(function (item) {
                return item.value !== itemVal;
            }),
        );
    };

    const { value } = props;
    if (!value) return null;
    return (
        <div ref={ref}>
            {value.map((item, index) => {
                return (
                    <Tag closable key={index} onClose={(e) => handleRemove(e, item.value)}>
                        {item.text}
                    </Tag>
                );
            })}
        </div>
    );
});

SelectTag.propTypes = {
    value: PropTypes.array,
    onChange: PropTypes.func,
};

export default SelectTag;
